<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ggk {
            position: relative;
            width: 400px;
            height: 200px;
        }
        .ggk .word {
            text-align: center;
            line-height: 200px;
            width: 100%;
            height: 100%;
            font-size: 20px;
        }
        #canvas {
            position: absolute;
            left: 0;
            bottom: 0;
        }

    </style>
</head>

<body>
    <div class="ggk">
        <div class="word">谢谢惠顾</div>
        <canvas id="canvas" width="400" height="200"></canvas>
    </div>
    <script>
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d')
        ctx.fillStyle="grey"
        ctx.fillRect(0,0,400,200)
        ctx.fillStyle='#fff'
        ctx.font="30px 微软雅黑"
        ctx.fillText('呱呱卡', 150,100)
        
        var isDrag = false
        var ggkDom = document.querySelector('.ggk')
        canvas.onmousedown = function(e) {
            console.log('down')
            isDrag = true
           
        }

        canvas.onmousemove = function(e) {
            if (isDrag) {
                var x = e.pageX - ggkDom.offsetLeft
                var y = e.pageY - ggkDom.offsetTop
                ctx.globalCompositeOperation = 'destination-out'
                ctx.beginPath()
                ctx.fillStyle = '#fff'
                ctx.arc(x,y,10,0,2*Math.PI)
                ctx.fill()
                ctx.closePath()
            }
        }

        

        canvas.onmouseup = function(e) {
            console.log('up')
            isDrag = false
        }

        var rewards = [
            {
                title: '一等奖 iphone13', 
                ratio: 0.1
            },
            {
                title: '二等奖 iphone12', 
                ratio: 0.2
            },
            {
                title: '三等奖 iphone11', 
                ratio: 0.3
            }
        ]
        var randomNum = Math.random()
        console.log(randomNum)
        var word = document.querySelector('.word')
        if (randomNum < 0.03) {
            word.innerText = rewards[0].title
        } else if (0.1 < randomNum < 0.2) {
            word.innerText = rewards[1].title
        } else if (0.2 < randomNum < 0.3) {
            word.innerText = rewards[2].title
        } else {
            word.innerText = '谢谢惠顾'
        }
    </script>
</body>
</html>